<template>
    <div>

    </div>
</template>

<script lang='ts'>
import {
    defineComponent, 
    ref, 
    reactive, 
    toRefs, 
    computed,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
    } from 'vue'
export default defineComponent({
  setup(){
      console.log("子组件setup");

      onBeforeMount(()=>{
          console.log("子组件dom元素挂载前触发");
      })
      onMounted(()=>{
          console.log('子组件dom元素挂载后触发');
      })
      onBeforeUpdate(()=>{
          console.log('子组件数据更新前触发');
      })
      onUpdated(()=>{
          console.log('子组件数据更新后触发');
      })
      onBeforeUnmount(()=>{
          console.log('子组件组件销毁前触发');
      })
      onUnmounted(()=>{
          console.log('子组件组件销毁后触发');
      })
      
    
    return{
    
    }
  },
});
</script>

<style scoped >

</style>
